<template >
  <div>
    <el-tree
      :data="data"
      :props="defaultProps"
      node-key="catId"
      @node-click="treeNodeClick"
    >
    </el-tree>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [],
      expandKeys: [],
      defaultProps: {
        children: "childrens",
        label: "name",
      },
    };
  },
  created() {
    this.getMenuDataList();
  },
  methods: {
    treeNodeClick(data, node, component) {
        // console.log("分类节点被点击了", data, node, component);
        //通过emit传值 在需要的地方去使用@key 绑定
        this.$emit("categoryTreeNodeClick", data);
    },
    // 获取数据列表
    getMenuDataList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/product/category/treeList"),
        method: "get",
      }).then(({ data }) => {
        // console.log(data);
        this.data = data.list;
        this.dataListLoading = false;
      });
    },
  },
};
</script>
<style >
</style>